﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Spread.Master" AutoEventWireup="true" CodeBehind="Overview.aspx.cs" Inherits="ControlExplorer.samples.AjaxSupport.Overview" %>
<%@ Register Assembly="FarPoint.Web.Spread"
    Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <style type="text/css">
    .toolbar {
      BACKGROUND-IMAGE: url(../images/ajax/toolbar.Horizontal.background.gif);
      MARGIN-BOTTOM: 1px;
      MARGIN-RIGHT: 2px;
    }
  </style>
  <script type="text/javascript">
    function btnOver(theTD, ftbName, imageOver, imageDown) {
      event.srcElement.style.backgroundColor = "lightsteelblue";
    }
    function btnOut(theTD, ftbName, imageOver, imageDown) {
      event.srcElement.style.backgroundColor = "";
    }

    function setFocus(ss) {
      if (document.all != null) {
        ss.focus();
      } else {
        the_fpSpread.SetPageActiveSpread(ss);
        the_fpSpread.Focus(ss);
      }
    }

    function FontBold() {
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("FontBold");
      setFocus(ss);
    }
    function FontItalic() {
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("FontItalic");
      setFocus(ss);
    }
    function SetFontName(name) {
      if (document.all != null) document.body.focus();
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("FontName." + name);
      setFocus(ss);
    }
    function SetFontSize(size) {
      if (document.all != null) document.body.focus();
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("FontSize." + size);
      setFocus(ss);
    }
    function FontUnderline() {
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("FontUnderline");
      setFocus(ss);
    }
    function AlignLeft() {
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("AlignLeft");
      setFocus(ss);
    }
    function AlignCenter() {
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("AlignCenter");
      setFocus(ss);
    }
    function AlignRight() {
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("AlignRight");
      setFocus(ss);
    }
    function SetForeColor(color) {
      if (document.all != null) document.body.focus();
      var ss = document.getElementById("FpSpread1");
      ss.CallBack("ForeColor." + color);
      setFocus(ss);
    }
    //function SetBackColor(color) {
    //  if (document.all != null) document.body.focus();
    //  var ss = document.getElementById("FpSpread1");
    //  ss.CallBack("BackColor." + color);
    //  setFocus(ss);
    //}
    function Cut() {
      var ss = document.getElementById("FpSpread1");
      ss.Clear();
    }
    function Copy() {
      var ss = document.getElementById("FpSpread1");
      ss.Copy();
    }
    function Paste() {
      var ss = document.getElementById("FpSpread1");
      ss.Paste();
    }
  </script>
  <br />
  <!-- BEGIN Toolbar -->
  <div id="Div1" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 2000; LEFT: 10px; OVERFLOW: hidden; BORDER-LEFT: black 1px solid; WIDTH: 768px; BORDER-BOTTOM: black 1px solid; POSITION: relative">
    <div class="toolbar" style="OVERFLOW: hidden">
      <table id="Table3" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td>
            <img src="../images/ajax/toolbar.Horizontal.start.gif" alt="" border="0" /></td>
          <td>
            <table id="Table4" cellspacing="0" cellpadding="0" border="0">
              <tr>
                <td class="btnnormal" id="ss_btn_Bold" onmouseover="btnOver();" onclick="FontBold();"
                  onmouseout="btnOut();">
                  <img height="20" alt="Bold" src="../images/ajax/bold.gif" width="21" border="0" /></td>
                <td class="btnnormal" id="ss_btn_Italic" onmouseover="btnOver();" onclick="FontItalic();"
                  onmouseout="btnOut();">
                  <img height="20" alt="Italic" src="../images/ajax/italic.gif" width="21" border="0" /></td>
                <td class="btnnormal" id="ss_btn_Underline" onmouseover="btnOver();" onclick="FontUnderline();"
                  onmouseout="btnOut();">
                  <img height="20" alt="Underline" src="../images/ajax/underline.gif" width="21"
                    border="0" /></td>
                <td>
                  <img alt="" src="../images/ajax/separator.Horizontal.gif" border="0" /></td>
                <td class="btnnormal" id="ss_btn_Justify Left" onmouseover="btnOver();" onclick="AlignLeft();"
                  onmouseout="btnOut();">
                  <img height="20" alt="Justify Left" src="../images/ajax/justifyleft.gif" width="21"
                    border="0" /></td>
                <td class="btnnormal" id="ss_btn_Justify Center" onmouseover="btnOver();" onclick="AlignCenter();"
                  onmouseout="btnOut();">
                  <img height="20" alt="Justify Center" src="../images/ajax/justifycenter.gif"
                    width="21" border="0" /></td>
                <td class="btnnormal" id="ss_btn_Justify Right" onmouseover="btnOver();" onclick="AlignRight();"
                  onmouseout="btnOut();">
                  <img height="20" alt="Justify Right" src="../images/ajax/justifyright.gif"
                    width="21" border="0" /></td>
                <td>
                  <img alt="" src="../images/ajax/separator.Horizontal.gif" border="0" /></td>
                <td style="PADDING-LEFT: 4px">
                  <select style="WIDTH: 75px" tabindex="-1" onchange="SetFontName(this[this.selectedIndex].text);this.selectedIndex=0;">
                    <option value="" selected="selected">Font</option>
                    <option value="Arial">Arial</option>
                    <option value="Courier New">Courier New</option>
                    <option value="Garamond">Garamond</option>
                    <option value="Georgia">Georgia</option>
                    <option value="Tahoma">Tahoma</option>
                    <option value="Times New Roman">Times</option>
                    <option value="Verdana">Verdana</option>
                  </select>
                </td>
                <td style="PADDING-LEFT: 4px">
                  <select tabindex="-1" style="WIDTH: 52px" onchange="SetFontSize(this[this.selectedIndex].text);this.selectedIndex=0;">
                    <option value="" selected="Selected">Size</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                  </select>
                </td>
                <td style="PADDING-LEFT: 4px">
                  <select style="WIDTH: 75px" tabindex="-1" onchange="SetForeColor(this[this.selectedIndex].text);this.selectedIndex=0;">
                    <option value="" selected="selected">Color</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: black" value="#000000">Black</option>
                    <option style="BACKGROUND-COLOR: gray" value="#808080">Gray</option>
                    <option style="BACKGROUND-COLOR: #A9A9A9" value="#A9A9A9">DarkGray</option>
                    <option style="BACKGROUND-COLOR: #D3D3D3" value="#D3D3D3">LightGray</option>
                    <option style="BACKGROUND-COLOR: white" value="#FFFFFF">White</option>
                    <option style="BACKGROUND-COLOR: #7FFFD4" value="#7FFFD4">Aquamarine</option>
                    <option style="BACKGROUND-COLOR: blue" value="#0000FF">Blue</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: navy" value="#000080">Navy</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: purple" value="#800080">Purple</option>
                    <option style="BACKGROUND-COLOR: #FF1493" value="#FF1493">DeepPink</option>
                    <option style="BACKGROUND-COLOR: #EE82EE" value="#EE82EE">Violet</option>
                    <option style="BACKGROUND-COLOR: #FFC0CB" value="#FFC0CB">Pink</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: #006400" value="#006400">DarkGreen</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: green" value="#008000">Green</option>
                    <option style="BACKGROUND-COLOR: #9ACD32" value="#9ACD32">YellowGreen</option>
                    <option style="BACKGROUND-COLOR: yellow" value="#FFFF00">Yellow</option>
                    <option style="BACKGROUND-COLOR: #FFA500" value="#FFA500">Orange</option>
                    <option style="BACKGROUND-COLOR: red" value="#FF0000">Red</option>
                    <option style="BACKGROUND-COLOR: #A52A2A" value="#A52A2A">Brown</option>
                    <option style="BACKGROUND-COLOR: #DEB887" value="#DEB887">BurlyWood</option>
                    <option style="BACKGROUND-COLOR: #F5F5DC" value="#F5F5DC">Beige</option>
                  </select>
                </td>
                <%--<td style="PADDING-LEFT: 4px">
                  <select style="WIDTH: 85px" tabindex="-1" onchange="SetBackColor(this[this.selectedIndex].text);this.selectedIndex=0;">
                    <option value="" selected="selected">BackColor</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: black" value="#000000">Black</option>
                    <option style="BACKGROUND-COLOR: gray" value="#808080">Gray</option>
                    <option style="BACKGROUND-COLOR: #A9A9A9" value="#A9A9A9">DarkGray</option>
                    <option style="BACKGROUND-COLOR: #D3D3D3" value="#D3D3D3">LightGray</option>
                    <option style="BACKGROUND-COLOR: white" value="#FFFFFF">White</option>
                    <option style="BACKGROUND-COLOR: #7FFFD4" value="#7FFFD4">Aquamarine</option>
                    <option style="BACKGROUND-COLOR: blue" value="#0000FF">Blue</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: navy" value="#000080">Navy</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: purple" value="#800080">Purple</option>
                    <option style="BACKGROUND-COLOR: #FF1493" value="#FF1493">DeepPink</option>
                    <option style="BACKGROUND-COLOR: #EE82EE" value="#EE82EE">Violet</option>
                    <option style="BACKGROUND-COLOR: #FFC0CB" value="#FFC0CB">Pink</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: #006400" value="#006400">DarkGreen</option>
                    <option style="COLOR: #ffffff; BACKGROUND-COLOR: green" value="#008000">Green</option>
                    <option style="BACKGROUND-COLOR: #9ACD32" value="#9ACD32">YellowGreen</option>
                    <option style="BACKGROUND-COLOR: yellow" value="#FFFF00">Yellow</option>
                    <option style="BACKGROUND-COLOR: #FFA500" value="#FFA500">Orange</option>
                    <option style="BACKGROUND-COLOR: red" value="#FF0000">Red</option>
                    <option style="BACKGROUND-COLOR: #A52A2A" value="#A52A2A">Brown</option>
                    <option style="BACKGROUND-COLOR: #DEB887" value="#DEB887">BurlyWood</option>
                    <option style="BACKGROUND-COLOR: #F5F5DC" value="#F5F5DC">Beige</option>
                  </select>
                </td>--%>
                <td>
                  <img alt="" src="../images/ajax/separator.Horizontal.gif" border="0" /></td>
                <td class="btnnormal" id="ss_btn_Cut" onmouseover="btnOver();" onclick="Cut();" onmouseout="btnOut();">
                  <img height="20" alt="Cut" src="../images/ajax/cut.gif" width="21" border="0" /></td>
                <td class="btnnormal" id="ss_btn_Copy" onmouseover="btnOver();" onclick="Copy();" onmouseout="btnOut();">
                  <img height="20" alt="Copy" src="../images/ajax/copy.gif" width="21" border="0" /></td>
                <td class="btnnormal" id="ss_btn_Paste" onmouseover="btnOver();" onclick="Paste();"
                  onmouseout="btnOut();">
                  <img height="20" alt="Paste" src="../images/ajax/paste.gif" width="21" border="0" /></td>
                <td>
                  <img alt="" src="../images/ajax/separator.Horizontal.gif" border="0" /></td>
              </tr>
            </table>
          </td>
          <td>
            <img alt="" src="../images/ajax/toolbar.Horizontal.end.gif" border="0" /></td>
        </tr>
      </table>
    </div>
    <!-- END TOOLBAR -->
    <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderWidth="1px" BorderStyle="Solid" BorderColor="Black" ClientIDMode="Static"
      Height="300px" Width="766px" IsPrint="False" DesignString='<?xml version="1.0" encoding="utf-8"?><Spread />'>
      <Sheets>
        <FarPoint:SheetView
          SheetName="Sheet1">
        </FarPoint:SheetView>
      </Sheets>
    </FarPoint:FpSpread>
  </div>
  <br />
  <br />
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
      AJAX 允许您单独刷新 Spread 控件而不是整个页面。您可以通过 FpSpread 下 EnableAjaxCall 属性轻松启用 Ajax 模式。这将对展开或折叠级联子表单、列排序、插入行和分页等特性启作用。
    </p><br />
    <p>
      如果 ClientAutoCalculation 属性设置为 true，在单元格的值发生改变时，FpSread 控件会进行 AJAX 调用。 FpSpread 会自动计算并且更新客户端单元格值。
    </p>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
